Week 03 · AI Vision Lab

VS Code + Flask
AI 視覺入門

Visual Studio Code · Flask Web · MediaPipe · OpenCV · EAR Detection

阮文孟 1111310035 Python 3.12 MediaPipe Flask

PART 01 OpenCV 攝影機測試 · 環境建立

# 建立虛擬環境 python -m venv .venv # 啟用環境 (Windows) .venv\Scripts\activate # 安裝核心套件 pip install --upgrade pip pip install opencv-python Flask mediapipe ultralytics

攝影機 API

cv2.VideoCapture(0)

影像格式

BGR → RGB 轉換

開發環境

VS Code + .venv

Screenshot 01 · VSCode Setup

⤢ double-click

Screenshot 02 · Terminal

⤢ double-click

PART 02 手勢偵測 · Hand Detection

偵測目標

21 個手部關節點與線條

核心函式

mp_hands.Hands()

影像格式

BGR → RGB 轉換

應用場景

手勢控制、虛擬畫筆

# 安裝套件 pip install mediapipe opencv-python # 初始化手部偵測 mp_hands = mp.solutions.hands hands = mp_hands.Hands(min_detection_confidence=0.7)

Screenshot 03 · Hand Landmarks

⤢ double-click

Screenshot 04 · Hand Detection Live

⤢ double-click

PART 03 臉部網格 · Face Mesh

關鍵點數量

468 個 3D 面部關鍵點

進階功能

refine_landmarks 虹膜偵測

應用場景

AR 濾鏡、表情分析

核心模型

Face Landmarker

face_mesh = mp.solutions.face_mesh mp_face_mesh = face_mesh.FaceMesh( refine_landmarks=True, min_detection_confidence=0.5)

Screenshot 05 · Face Mesh Code

⤢ double-click

Screenshot 06 · Face Mesh Live

⤢ double-click

PART 04 手勢偵測 + Face Mesh · Combined

整合模型

Face Landmarker + Hand Landmarker

即時偵測

臉部網格 + 手部骨架同步

視窗標題

Combined Face-Hand AI Lab

Screenshot 07 · Combined Code

⤢ double-click

Screenshot 08 · Combined Live

⤢ double-click

PART 05 疲勞偵測原理 · EAR Algorithm

0.42

▲ AWAKE · EAR > 0.25

0.05

⚠ DROWSY · EAR < 0.2

EAR 公式

上下眼瞼 / 左右眼角比例

清醒判斷

EAR > 0.25

疲勞觸發

EAR < 0.2 且持續 > 1.5 秒

使用 Claude

10 分鐘自動完成

# EAR 計算核心 EYE_IDX = [33, 160, 158, 133, 153, 144] def calculate_ear(landmarks, eye_indices): v1 = np.linalg.norm(p[1]-p[5]) v2 = np.linalg.norm(p[2]-p[4]) h = np.linalg.norm(p[0]-p[3]) return (v1 + v2) / (2.0 * h) # 疲勞警告觸發 if avg_ear < 0.2 and duration > 1.5: cv2.putText(frame, "!!! DROWSY WARNING !!!", ...)

Screenshot 09 · AWAKE State

⤢ double-click

Screenshot 10 · DROWSY WARNING

⤢ double-click

Screenshot 11 · Claude Auto · Error

⤢ double-click

Screenshot 12 · Claude Auto · Done

⤢ double-click

心得感想 · Reflection

學習心得

這堂課對我來說充滿了挑戰與成就感。起初，我在安裝 MediaPipe 3.12.2 版本時遇到了 AttributeError 的困難，但在不斷嘗試與修正代碼結構後，終於成功解決了問題。

01

環境配置與除錯：針對 Python 3.12 重新安裝相容的 MediaPipe 庫，並確保開發環境 (.venv) 運作正常。
02

多模型集成：同時加載 Face Landmarker 與 Hand Landmarker 模型，實現臉部網格與手部骨架的即時偵測。
03

疲勞監測算法：利用眼部關鍵點計算 EAR 指標。當系統偵測到平均 EAR 低於 0.2 且持續超過 1.5 秒時，會立即觸發紅色警告字樣。
04

Web 系統開發：利用 Flask 框架將 AI 功能整合至網頁系統，實現了透過 IP 地址進行遠端監控的功能。

看著畫面上的綠色網格精準地貼合在臉上，並能在閉眼時給出警示，我感到非常有成就感。這堂課不僅讓我學到了 AI 技術，更鍛煉了我在軟體開發中解決問題的能力，收穫非常豐富！